<!--
 * @Author: your name
 * @Date: 2021-11-01 17:01:11
 * @LastEditTime: 2022-08-29 18:09:05
 * @LastEditors: ZengXY
 * @Description: In User Settings Edit
 * @FilePath: \webgis-sdk\html\examples_PMS\01_mapAddPsrMap.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="../libs/webgis/css/narimap.css" />
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
    <link
      rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"
      type="text/css"
    />
    <title>创建站内图</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 100%;"></div>
    <script src="./configs/loadDemoConfig.js"></script>
    <script src="../libs/webgis/narimap.min.js"></script>
    <script>
      Require(['PSRMap'], () => {
        var stationmap
        if (NARIMap.Config.examples.notlogin) {
          initMap()
        } else {
          //电网GIS地图服务登录
          NARIMap.SGAuth.login()
            .then(function (result) {
              if (result.success) {
                console.log('登录成功')
              } else {
                console.log('登录失败', result)
              }
              initMap()
            })
            .catch((err) => {
              console.log('错误', err)
            })
        }
      })

      /**
       */
      function initMap() {
        stationmap = new NARIMap.StationMap()
        //总部、省侧psrType不同，需要动态获取
        let devType = NARIMap.PsrTypeMapper.classIdToPsrTypes([110])[0]
        stationmap.init({
          // 地图绑定的DOM元素ID
          container: 'map',
          station: {
            devid: '10197', //设备id
            classid: 110, //图层类型
            vlogate: 500000, //电压等级
            deviceType: devType, //国网设备类型
            distribution: 1, //主配网标志
            provinceId: 'ff80808149f52e24014a039871840007', //分省ID
          },
          fullExtent: NARIMap.Config.examples.fullExtent,
          isLoadAnno: false,
          onload: () => {
            //添加设备点击事件
            stationmap.getPsrMap().on('click', (features) => {
              console.log(features)
            })

            const draw = new MapboxDraw({
              displayControlsDefault: false,

              controls: {
                polygon: true,
                point: true,
                line_string: true,
                trash: true,
              },

              defaultMode: 'draw_polygon',
              styles: [
                {
                  id: 'gl-draw-polygon-fill-inactive', // 指定多边形非选中状态图层样式
                  type: 'fill',
                  filter: [
                    'all',
                    ['==', 'active', 'false'],
                    ['==', '$type', 'Polygon'],
                    ['!=', 'mode', 'static'],
                  ],
                  paint: {
                    'fill-color': '#ff0000',
                    'fill-outline-color': '#ff0000',
                  },
                },
                {
                  id: 'gl-draw-polygon-fill-active', // 指定多边形选中状态图层样式
                  type: 'fill',
                  filter: [
                    'all',
                    ['==', 'active', 'true'],
                    ['==', '$type', 'Polygon'],
                  ],
                  paint: {
                    'fill-color': '#fbb03b',
                    'fill-outline-color': '#fbb03b',
                    'fill-opacity': 0.1,
                  },
                },
                {
                  id: 'gl-draw-polygon-midpoint', // 多边形顶点样式
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', '$type', 'Point'],
                    ['==', 'meta', 'midpoint'],
                  ],
                  paint: {
                    'circle-radius': 3,
                    'circle-color': '#fbb03b',
                  },
                },
                {
                  id: 'gl-draw-polygon-stroke-inactive', // 多边形非激活状态轮廓线样式
                  type: 'line',
                  filter: [
                    'all',
                    ['==', 'active', 'false'],
                    ['==', '$type', 'Polygon'],
                    ['!=', 'mode', 'static'],
                  ],
                  layout: {
                    'line-cap': 'round',
                    'line-join': 'round',
                  },
                  paint: {
                    'line-color': '#ff0000',
                    'line-width': 2,
                  },
                },
                {
                  id: 'gl-draw-polygon-stroke-active',
                  type: 'line',
                  filter: [
                    'all',
                    ['==', 'active', 'true'],
                    ['==', '$type', 'Polygon'],
                  ],
                  layout: {
                    'line-cap': 'round',
                    'line-join': 'round',
                  },
                  paint: {
                    'line-color': '#fbb03b',
                    'line-dasharray': [0.2, 2],
                    'line-width': 2,
                  },
                },
                {
                  id: 'gl-draw-line-inactive',
                  type: 'line',
                  filter: [
                    'all',
                    ['==', 'active', 'false'],
                    ['==', '$type', 'LineString'],
                    ['!=', 'mode', 'static'],
                  ],
                  layout: {
                    'line-cap': 'round',
                    'line-join': 'round',
                  },
                  paint: {
                    'line-color': '#3bb2d0',
                    'line-width': 2,
                  },
                },
                {
                  id: 'gl-draw-line-active',
                  type: 'line',
                  filter: [
                    'all',
                    ['==', '$type', 'LineString'],
                    ['==', 'active', 'true'],
                  ],
                  layout: {
                    'line-cap': 'round',
                    'line-join': 'round',
                  },
                  paint: {
                    'line-color': '#fbb03b',
                    'line-dasharray': [0.2, 2],
                    'line-width': 2,
                  },
                },
                {
                  id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', 'meta', 'vertex'],
                    ['==', '$type', 'Point'],
                    ['!=', 'mode', 'static'],
                  ],
                  paint: {
                    'circle-radius': 5,
                    'circle-color': '#fff',
                  },
                },
                {
                  id: 'gl-draw-polygon-and-line-vertex-inactive',
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', 'meta', 'vertex'],
                    ['==', '$type', 'Point'],
                    ['!=', 'mode', 'static'],
                  ],
                  paint: {
                    'circle-radius': 3,
                    'circle-color': '#fbb03b',
                  },
                },
                {
                  id: 'gl-draw-point-point-stroke-inactive',
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', 'active', 'false'],
                    ['==', '$type', 'Point'],
                    ['==', 'meta', 'feature'],
                    ['!=', 'mode', 'static'],
                  ],
                  paint: {
                    'circle-radius': 5,
                    'circle-opacity': 1,
                    'circle-color': '#fff',
                  },
                },
                {
                  id: 'gl-draw-point-inactive',
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', 'active', 'false'],
                    ['==', '$type', 'Point'],
                    ['==', 'meta', 'feature'],
                    ['!=', 'mode', 'static'],
                  ],
                  paint: {
                    'circle-radius': 3,
                    'circle-color': '#3bb2d0',
                  },
                },
                {
                  id: 'gl-draw-point-stroke-active',
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', '$type', 'Point'],
                    ['==', 'active', 'true'],
                    ['!=', 'meta', 'midpoint'],
                  ],
                  paint: {
                    'circle-radius': 7,
                    'circle-color': '#fff',
                  },
                },
                {
                  id: 'gl-draw-point-active',
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', '$type', 'Point'],
                    ['!=', 'meta', 'midpoint'],
                    ['==', 'active', 'true'],
                  ],
                  paint: {
                    'circle-radius': 5,
                    'circle-color': '#fbb03b',
                  },
                },
                {
                  id: 'gl-draw-polygon-fill-static',
                  type: 'fill',
                  filter: [
                    'all',
                    ['==', 'mode', 'static'],
                    ['==', '$type', 'Polygon'],
                  ],
                  paint: {
                    'fill-color': '#404040',
                    'fill-outline-color': '#404040',
                    'fill-opacity': 0.1,
                  },
                },
                {
                  id: 'gl-draw-polygon-stroke-static',
                  type: 'line',
                  filter: [
                    'all',
                    ['==', 'mode', 'static'],
                    ['==', '$type', 'Polygon'],
                  ],
                  layout: {
                    'line-cap': 'round',
                    'line-join': 'round',
                  },
                  paint: {
                    'line-color': '#404040',
                    'line-width': 2,
                  },
                },
                {
                  id: 'gl-draw-line-static',
                  type: 'line',
                  filter: [
                    'all',
                    ['==', 'mode', 'static'],
                    ['==', '$type', 'LineString'],
                  ],
                  layout: {
                    'line-cap': 'round',
                    'line-join': 'round',
                  },
                  paint: {
                    'line-color': '#404040',
                    'line-width': 2,
                  },
                },
                {
                  id: 'gl-draw-point-static',
                  type: 'circle',
                  filter: [
                    'all',
                    ['==', 'mode', 'static'],
                    ['==', '$type', 'Point'],
                  ],
                  paint: {
                    'circle-radius': 5,
                    'circle-color': '#404040',
                  },
                },
              ],
            })
            stationmap.getMap().addControl(draw)
          },
        })
      }
    </script>
  </body>
</html>
